<template>
    <div id="main-body" class="bg-primary-100 flex justify-center h-screen">
    <section class="container flex justify-center items-center rounded ">
        <div class="hidden md:block">
          <img src="../assets/images/bg.png" alt="" class="rounded-l max-h-[500px]">
        </div>
        <div class="rounded-r w-80 h-[500px] my-8 px-2 py-4 bg-white shadow shadow-gray-300">
          <div class="text-center text-lg py-6">用户登录</div>
          <form id="register_form" class="px-4">
            <div class="flex justify-left items-center relative h-10 px-4  my-2 rounded border-solid border border-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <input v-model="username" type="text"  placeholder="请输入用户名" class="outline-0 text-sm">
            </div>
            <div class="flex justify-left items-center relative h-10 px-4  my-2 rounded border-solid border border-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
              <input v-model="password" type="password"  placeholder="请输入密码" class="outline-0 text-sm">
            </div>
            <div class="pt-6">
              <button v-on:click.prevent="submitForm" id="login" class="rounded bg-green-500 w-full h-8 text-white">登录</button>
            </div>
            <div class="text-center text-sm my-2"> 
              <span class="text-left text-green-500">
                <router-link to="/reset_password">忘记密码?</router-link>
              </span>              
              没有账号
              <a class="text-blue-500" href="/register">去注册</a>
            </div>
          </form>
        </div>
    </section>
</div>

</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { loginUser } from '@/api/account'
import { showToast } from '@/utils/toast'
import { storeTokens } from '@/utils/auth' // 导入 storeTokens 函数

const username = ref('')
const password = ref('')
const router = useRouter()
const route = useRoute()

const submitForm = async () => {
  if (!username.value || !password.value) {
    showToast('请输入用户名和密码')
    return
  }

  try {
    const response = await loginUser({ username: username.value, password: password.value })
    if (response.status === 200) {
      const { access, refresh } = response.data
      // 使用工具函数存储 JWT 令牌和用户名
      storeTokens(access, refresh, username.value)
      showToast('登录成功', 'success')
      
      // 获取登录前要访问的页面路径
      const redirectPath = route.query.redirect || '/'
      router.push(redirectPath)
    } else {
      showToast('登录失败')
    }
  } catch (error) {
    console.error('登录失败:', error)
    if (error.response && error.response.status === 401) {
      showToast('登录失败，可能是用户名或密码错误，或账号未激活')
    } else {
      showToast('登录失败，请稍后重试')
    }
  }
}
</script>
